<template>
  <FormItemWrapper :widget="widget">
    <Textarea
      ref="textareaRef"
      v-model:value="widgetProps.value"
      :placeholder="widgetProps.placeholder"
      :disabled="widgetProps.disabled"
      :readonly="widgetProps.readonly"
      :allowClear="widgetProps.allowClear"
      :showCount="widgetProps.showCount"
      :maxlength="widgetProps.maxLength"
      :autoSize="autoSize"
      :bordered="widgetProps.bordered"
    />
  </FormItemWrapper>
</template>
<script lang="ts" name="textarea-widget" setup>
  import { ref, watch, computed, onMounted, nextTick, provide } from "vue"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useGlobSetting } from "/@/hooks/setting"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { Textarea } from "ant-design-vue"
  import { Icon } from "/@/components/Icon"
  import FormItemWrapper from "./FormItemWrapper.vue"
  import { useWidget } from "../useWidget"

  const fieldModel = ref("")
  const props = defineProps({
    widget: { type: Object, default: {} },
    designerConfig: {
      type: Object,
      default: () => {
        return {
          formTemplates: true, //是否显示表单模板
        }
      },
    },
  })
  const widgetProps = props.widget.props
  const autoSize = computed(() => {
    const minRows = widgetProps.minRows
    const maxRows = widgetProps.maxRows
    if (widgetProps.minRows || widgetProps.maxRows) {
      return { minRows, maxRows }
    }
    return widgetProps.autoSize
  })
  watch(
    () => widgetProps.maxLength,
    (val: number) => {
      widgetProps.showCount = val && val > 0
    },
    {
      deep: true,
      immediate: true,
    }
  )

  const { watchDefaultValue } = useWidget()
  watchDefaultValue(props)
  provide("designerConfig", props.designerConfig)
</script>

<style lang="less"></style>
